<template>
  <div class="checkList_box block">
    <f7-list ref="checkList" class="infinite-scroll-content backgroundSubColor">
      <f7-list-item
        checkbox
        title="全选"
        class="titleColor backgroundSubColor"
        name="song-checkbox"
        :checked="checkedSongs && checkedSongs.length === pLenth"
        :indeterminate="checkedSongs && checkedSongs.length <pLenth && checkedSongs.length>0"
        @change="onSongsChange"
        v-if ="pLenth>0"
      >
        <ul
          slot="root"
          ref="vUl"
          v-if="propData && propData.length"
          class="backgroundSubColor"
        >
          <f7-list-item
            v-for="(item, index) in propData"
            :key="index"
            checkbox
            name="song-checkbox"
            :value="item.songId"
            :checked="checkedSongs.indexOf(item.songId) >= 0"
            @change="onSongChange"
          >
            <div slot="title" class="itemTitle">
              <div class="title_box titleColor">
                {{ item.name }}
              </div>
            </div>
            <div slot="footer" class="itemFooter">
              <svg-icon
                iconClass="no_favorite_white"
                v-if="!item.isFavorite && getThemeDark"
              />
              <svg-icon
                iconClass="is_favorite"
                v-else-if="item.isFavorite && getThemeDark"
              />
              <svg-icon
                iconClass="no_favorite"
                v-else-if="!item.isFavorite && !getThemeDark"
              />
              <svg-icon
                iconClass="is_favorite"
                v-else-if="item.isFavorite && !getThemeDark"
              />
              <div class="titleSubColor">{{ item.singer }}</div>
            </div>
          </f7-list-item>
        </ul>
      </f7-list-item>
    </f7-list>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  props: {
    propData: {
      type: Array,
      default: ()=>{[
        {
          isFavorite: true,
          lyric:
            'http://127.0.0.1:9000/2021/07/07/705f4efc-fc89-4fd8-9cc8-3d8d564953cb.lrc',
          name: '不再问',
          singer: '刘若英',
          songId: '27',
          songIndex: null,
          src:
            'http://127.0.0.1:9000/music/2021/07/07/2e2e8f55-b3ed-4ceb-b2e2-3feacf88471b.mp3',
        },
        {
          isFavorite: false,
          lyric:
            'http://127.0.0.1:9000/2021/06/25/a6ce832f-3afc-4a5e-9804-5eb609399652.lrc',
          name: '冬眠',
          singer: '司南',
          songId: '26',
          songIndex: null,
          src:
            'http://127.0.0.1:9000/music/2021/06/25/389fd4b5-23eb-4bdd-977d-89622f706fcd.mp3',
        },
      ]},
    },
  },
  computed:{
    ...mapGetters({
      getThemeDark: 'getThemeDark',
    }),
    pLenth(){
      if (this.propData){
        return this.propData.length
      }
      else {
        return 0;
      }
    }
  },
  watch:{
    checkedSongs(val){
      this.$emit('changeChecked',val);
    }
  },

  data() {
    return {
      checkedSongs: [],
    }
  },
  methods: {
    onSongChange: function(e) {
      let self = this
      let value = e.target.value
      if (e.target.checked) {
        self.checkedSongs.push(value)
      } else {
        self.checkedSongs.splice(self.checkedSongs.indexOf(value), 1)
      }
    },
    onSongsChange: function(e) {
      let self = this
      if (Array.isArray(self.checkedSongs) && (self.checkedSongs.length < this.pLenth)) {
        self.checkedSongs = [];
        self.propData.forEach(item=>{
          self.checkedSongs.push(item.songId);
        })
        
      } else if (self.checkedSongs.length === this.pLenth) {
        self.checkedSongs = []
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/theme.scss';
.light .checkList_box {
  $borderColor: #2c2c2c;
  /deep/ .icon-checkbox {
    border: 2px $borderColor solid;
  }
}
.dark .checkList_box {
  $borderColor: #f0f0f0;
  /deep/ .icon-checkbox {
    border: 2px $borderColor solid;
  }
}
.block,.list{
  margin:0;
}
.checkList_box {
  
  ul{
    padding-left:0.1rem;
    height:calc(91vh - 1.5rem);
    overflow-y: scroll;
  }
  .itemTitle {
    display: flex;
    align-items: center;
    .index_box {
      width: 0.3rem;
      flex-shrink: 0;
      .svg-icon {
        width: 0.2rem;
        height: 0.2rem;
      }
    }
  }
  .itemFooter {
    display: flex;
    align-items: center;
    .svg-icon {
      width: 0.2rem;
      height: 0.2rem;
    }
  }
}
</style>
